<template>
	<div class="dialog-wrap">
		<div class="dialog-detail">
			<img src="@/assets/img/close.png" class="close" @click="close">
			
			<div class="left">
				<div class="left-box">
					<div class="progress" v-show="isShowProgress">
						<p>模型生成中 {{percentage}}%</p>
						<el-progress :percentage="percentage" :define-back-color='backColor' :stroke-width='15' :show-text="false" :color="customColor"></el-progress>
					</div>
					
					<div ref="threeContainer" class="model-content" style="height:100%" v-show="!isShowProgress"></div>
				</div>
				
				<div class="model-operate">
					<div class="tool-info">
						<span>
							<img src="@/assets/img/view.png" class="view"/>
							{{modelInfo.view_num ?? 0}}
						</span>
						<span @click.stop="collect" class="can-click" :class="isComplete ? '' : 'notOperate'">
							<img src="@/assets/img/collect-active.png" class="collect"v-if='modelInfo.is_collect == 1'>
							<img src="@/assets/img/collect.png" class="collect" v-else>
							{{modelInfo.collect_num ?? 0}}
						</span>
						<span @click.stop="like" class="can-click" :class="isComplete ? '' : 'notOperate'">
							<img src="@/assets/img/like-active.png" class="like" v-if='modelInfo.is_like == 1'>
							<img src="@/assets/img/like.png" v-else>
							{{modelInfo.like_num ?? 0}}
						</span>
					</div>
					<span class="download" :class="isComplete ? '' : 'notClick'" @click="download">下载</span>
				</div>
			</div>
			
			<div class="right">
				<div class="creater-wrap">
					<div class="creater">
						<img :src='staticURL+modelInfo.headimg' v-if='modelInfo.headimg'/>
						<img src="@/assets/img/user-logo.png" v-else/>
						<p class="name">{{modelInfo.realname}}</p>
						<span>{{modelInfo.classname}}</span>
					</div>
					<span class="time">{{modelInfo?.create_time?.slice(0,10)}}</span>
				</div>
				
				<div class="guider">
					<div>
						<span class="guider-l">指导老师</span>
						<span class="guider-r">{{modelInfo.teachername}}</span>
					</div>
					
					<div>
						<span class="guider-l">作品评级</span>
						<span class="guider-r">{{modelInfo.level | levelStatus}}</span>
					</div>
				</div>
				
				<!-- 模型信息 -->
				<div class="prompt-wrap mgb-15">
					<h1>提示词<span>（试一下）</span></h1>
					<div class="textarea-wrap">
						<textarea placeholder="描述你想要生成的物体，如火星。" rows="4" readonly v-model="modelInfo.name"></textarea>
					</div>
				</div>	
				
				<div class="prompt-wrap mgb-15">
					<h1>反面提示词<span>（可选）</span></h1>
					<div class="textarea-wrap">
						<textarea placeholder="描述你想要生成的物体，如火星。" rows="4"  readonly v-model="modelInfo.negative_prompt"></textarea>
					</div>
				</div>	
				
				<div class="art-wrap">
					<h1>艺术风格<span></span></h1>
					<ul>
						<li v-for='(item,index) in artList' :key='index' :class='flag==item.key?"current":""'>
							<span>{{item.name}}</span>
							<img :src="item.src">
						</li>
					</ul>
				</div>	
				
				<div class="prompt-wrap mgb-15" v-if="modelInfo.comment">
					<h1>点评</h1>
					<div class="textarea-wrap">
						<textarea rows="4"  readonly v-model="modelInfo.comment"></textarea>
					</div>
				</div>	
			</div>	
		</div>
	</div>
</template>

<script>
	import * as THREE from "three";
	import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
	import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
	// import * as GLTFLoader from 'three-gltf-loader';
	import utils from '@/assets/js/utils';
	import {
		modelLike,
		modelCollect,
		download
	} from '@/api/model.js';
	import {getModelDetail} from '@/api/model.js';
	import watermark from '@/assets/js/watermark.js'
	export default {
		props: {
			model_id:{
				type: [String,Number],
				default: ""
			},
		},

		data() {
			return {
				camera: null,
				scene: null,
				renderer: null,
				modelUrl:"",
				flag:"",  
				modelDetail:{},
				modelInfo:{},
				artList:[
					{name:"智能",key:"auto",src:require("@/assets/img/zhineng.png")},
					{name:"写实",key:"realistic",src:require("@/assets/img/xieshi.png")},
					{name:"卡通",key:"cartoon",src:require("@/assets/img/cartoon.png")},
					{name:"雕塑",key:"sculpture",src:require("@/assets/img/polygon.png")}
				],
				isRenderModel:true,
				customColor: '#FF8A00',
				backColor:"#EEEEEE",
				isShowProgress:false,
				percentage:0,
				isComplete:false
			}
		},
		
		created() {
			if(this.model_id){
				this.getModelDetail()
			}
		},
		
		mounted(){
			watermark.set("云图 3D",this.$refs.threeContainer);
		},
		
		beforeDestroy() {
			watermark.set("",this.$refs.threeContainer);
		},
		
		methods: {
			initModel(){
				const width = this.$refs.threeContainer.clientWidth;
				const height = this.$refs.threeContainer.clientHeight;
				// 创建场景
				this.scene = new THREE.Scene();
				// 添加相机
				this.camera = new THREE.PerspectiveCamera(75, width / height, 0.01, 3000);
				this.camera.position.z = 1;
				this.camera.lookAt(0, 0, 0)
				// 创建渲染器
				this.renderer = new THREE.WebGLRenderer({ antialias: true,alpha:true });
				this.renderer.setSize(width, height);
				this.renderer.setClearColor(0x000000,0);
				this.$refs.threeContainer.appendChild(this.renderer.domElement);
				const loader = new GLTFLoader();				// 加载3D模型
				loader.load(this.modelUrl, (gltf) => {
					gltf.scene.traverse(function(child) {
						if (child.isMesh) {
							child.material.emissive = child.material.color;
							child.material.emissiveMap = child.material.map;
						}
					});
					this.scene.add(gltf.scene);
				},
				(xhr) =>{
					this.percentage = Math.round(Number(xhr.loaded / xhr.total * 100));
					if(this.percentage == 100){
						this.isShowProgress = false
					}
				},
				(error) => {
					console.error(error);
				})	
				//添加控制器
				let controls = new OrbitControls(this.camera, this.renderer.domElement);
				controls.addEventListener("change", () => {
					this.renderer.render(this.scene, this.camera);
				});
			},
			
			animate(){
				requestAnimationFrame(this.animate);
				this.renderer.render(this.scene, this.camera);
			},
			
			async getModelDetail(){
				const obj = {model_id: this.model_id};
				const {
					data,
					status
				} = await getModelDetail(obj);
				if (status !== 200) return;
				if(data.code == 200 && data.data){
					this.modelDetail = data.data.detail || {};
					this.modelInfo = data.data.info || {};
					this.modelUrl = this.modelInfo.glbUrl;
					this.flag = this.artList.find(ele => ele.key == this.modelInfo.style)?.key;
					this.isComplete = true;
					if(this.modelUrl && this.isRenderModel){
						this.isShowProgress = true;
						this.initModel();
						this.animate();
					}
				}
				else{
					this.isComplete = false;
					this.modelDetail = {};
					this.modelInfo = {};
					this.$message.warning(data && data.message || '登录失败');
				}
			},
			
			//收藏
			async collect(){
				if(!this.isComplete){
					return
				}
				this.isRenderModel = false;
				const obj = {
					model_id: this.modelInfo?.id,
					status: this.modelInfo.is_collect == 1 ? 0 : 1
				};
				const {
					data,
					status
				} = await modelCollect(obj);
				if (status !== 200) return;
				if(data.code == 200){
					this.getModelDetail();
					this.$message.success(this.modelInfo.is_collect == 1 ? "已取消收藏" : "收藏成功");
				}
				else{
					this.$message.warning(this.modelInfo.is_collect == 1 ? "取消收藏失败" : "收藏失败");
				}	
			},
			
			//点赞
			async like(){
				if(!this.isComplete){
					return
				}
				this.isRenderModel = false;
				const obj = {
					model_id: this.modelInfo?.id,
					status: this.modelInfo.is_like == 1 ? 0 : 1
				};
				const {
					data,
					status
				} = await modelLike(obj);
				if (status !== 200) return;
				if(data.code == 200){
					this.getModelDetail();
					this.$message.success(this.modelInfo.is_like == 1 ? "已取消点赞" : "点赞成功");
				}
				else{
					this.$message.warning(this.modelInfo.is_like == 1 ? "取消点赞失败" : "点赞失败");
				}	
				
			},
			
			async download(){
				if(!this.isComplete){
					return
				}
				const obj = {
					model_id: this.modelInfo?.id,
				};
				const {
					data,
					status
				} = await download(obj);
				if (status !== 200) return;
				if(data.code == 200){
					window.open(this.modelUrl);
					this.$message.success("下载成功");
				}
				else{
					this.$message.warning("下载失败");
				}	
			},
			
			close() {
				this.$emit('close');
			}
		}
	};
</script>

<style lang="scss" scoped>
	.dialog-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		z-index: 9;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		.dialog-detail {
			position: relative;
			width: 1200px;
			background: #FFFFFF;
			border-radius: 10px;
			border: 1px solid #CCCCCC;
			display: flex;
			justify-content: space-between;
			overflow: auto;
			border-radius: 10px 10px 10px 10px;
			.left{
				width: 65%;
				background: #F0F3F4;
				max-height: 98vh;
				.left-box{
					width: 100%;
					height:calc(100% - 66px);
					@include flex-row;
					justify-content: center;
					background: #F0F3F4;
					.progress{
						width: 60%;
						p{
							margin-bottom: 10px;
							font-size: 14px;
							color: #666666;
						}
						:deep(.el-progress-bar__outer){
							border: 1px solid #999999;
						}
					}
					.model-content{
						width: 100%;
						height:100%;
						position: relative;
					}
				}
				.model-operate{
					background: #EEEEEE;
					height: 66px;
					padding: 20px 30px;
					@include flex-row;
					justify-content: space-between;
					box-sizing: border-box;
					.tool-info{
						@include flex-row;
						span{
							@include flex-row;
							font-size: 14px;
							color: #666666;
							img{
								display: block;
								margin-right: 4px;
							}
						}
						.can-click{
							@include cursor-style;
						}
						span:not(:last-child){
							margin-right: 10px;
						}
						.notOperate{
							cursor: default
						}
					}
					.download{
						@include cursor-style;
						@include font-style;
						width: 96px;
						height: 36px;
						line-height: 36px;
						text-align: center;
						background: #FF8A00;
						border-radius: 60px 60px 60px 60px;
						font-size: 14px;
						color: #FFFFFF;
					}
					.notClick{
						cursor: default;
						background: #D4D9DB;
					}
				}
			}
			.right{
				padding: 30px;
				width: 35%;
				max-height: 98vh;
				overflow: auto;
				box-sizing: border-box;
				.creater-wrap{
					@include flex-row;
					justify-content: space-between;
					box-sizing: border-box;
					.creater{
						@include flex-row;
						img{
							display: block;
							width: 60px;
							height: 60px;
							border-radius: 50%;
						}
						span{
							font-size: 14px;
							color: #333333;
						}
						.name{
							@include font-style;
							margin-right: 20px;
							margin-left: 15px;
							font-size: 18px;
							color: #333333;
						}
					}
					.time{
						font-size: 14px;
						color: #999999;
					}
				}
				.guider{
					@include flex-row;
					margin: 16px 0;
					span{
						font-size: 12px;
						@include font-style;
						margin-right: 24px;
					}
					.guider-l{
						margin-right: 10px;
						color: #999999;
					}
					.guider-r{
						color: #333333;
					}
				}
				h1{
					@include font-style;
					font-size: 16px;
					color: #333333;
					margin-bottom: 15px;
					position: relative;
					span{
						color:#FFC267
					}
				}
				@include prompt-wrap;
				@include art-wrap;
			}
			.close {
				position: absolute;
				right: 30px;
				top: 20px;
				width: 20px;
				height: 20px;
				cursor: pointer;
			}

		}
	}
</style>
